<template>
    <div id="FreeAtlas" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
        <div style="padding: 0 2px">
            <form action="/">
                <van-search style="
               width: calc(100% - 4px);
               background: #EEE;
               border-radius: 10px;
               height:40px;
               font-size: 14px;
               float: left" v-model="value1" placeholder="请输入图集名称" @search="onSearch" />
            </form>
        </div>
        <div>
            <van-list v-model="loading" :finished="finished" :offset="4" finished-text="没有更多了" @load="onLoad">
                <div class="van-clearfix">
                    <div style="" :class="showMoble ? 'boxser' : 'pcStyle'"
                        v-for="(item, index) in imagesList" :key="index">
                        <p @click="handleToThreePage(item)">
                            <img style="border-radius: 10px;height: 120px;" width="100%"  v-if="item.vrUrl == null && item.suolueFileId"
                                :src="baseurlid + item.suolueFileId" alt v-lazy="baseurlid + item.suolueFileId" />
                            <img style="border-radius: 10px;height: 120px;" width="100%"  v-if="item.vrUrl != null && item.suolueFileId"
                                :src="baseurlid + item.suolueFileId" alt v-lazy="baseurlid + item.suolueFileId" />
                            <img style="border-radius: 10px;height: 120px;" width="100%" v-if="!item.suolueFileId"
                                src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964"
                                alt="">
                        </p>
                        <div :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }"
                            style="padding:10px 4px;font-size: 14px;">
                            <p style="font-size: 14px;font-weight:600;">{{ item.floors ? item.floors : 0 }}层|{{ item.buildArea ? item.buildArea : 0 }}m²</p>
                            <p style="font-size: 14px;font-weight:600; white-space:nowrap; text-overflow:ellipsis;overflow:hidden;">{{ item.atlasName }}</p>
                            <!-- <p style="font-weight:800">{{item.atlasName}}</p> -->
                            <p style="margin-left:4px;font-size: 14px;height: 26px;padding-top: 6px;">
                                <van-tag type="primary" style="font-weight:600">{{ item.countyName }}</van-tag>
                                <!-- <span >VR图集</span> -->
                                    <van-tag type="primary" v-if="item.atlasType != null" style="font-weight:600;float:right"
                                    @click="vrSee(item)">VR图集</van-tag>
                                <van-tag v-else style="font-weight:600;float:right">通用图集</van-tag>
                            </p>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
import { Atlases, selectListByIds, dataTransFilePreview } from '@/utils/api'
export default {
    data () {
        return {
            showEdition: false,
            value: '',
            loading: false,
            finished: false,
            showPicker: false,
            value1: '',
            showMoble: true, //初始化移动端相关内容的显示
            baseurl: window.g.BaseURL4,
            baseurls: window.g.OSSPriview,
            baseurlid: window.g.OSSPriviewId,
            baseurl1: window.g.BaseURL2,
            index: 0,
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            imagesList: []
        }
    },
    created () {
        this.judgmentResolution()
    },
    methods: {
        /* 分辨率区分--PC端+移动端 */
        judgmentResolution () {
            var sUserAgent = navigator.userAgent.toLowerCase()
            var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os'
            var bIsMidp = sUserAgent.match(/midp/i) == 'midp'
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'
            var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb'
            var bIsAndroid = sUserAgent.match(/android/i) == 'android'
            var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
            var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                this.showMoble = true
            } else {
                this.showMoble = false
            }
        },
        onLoad () {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            this.index += 1
            if (this.value1) {
                this.getData(this.value1, window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '')
            } else {
                this.getData('', window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '')
            }
        },
        onSearch () {
            this.index = 0
            this.imagesList = []
            this.getData(this.value1, window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '')
        },
        onConfirm (value) {
            this.value = value
            this.showPicker = false
        },
        handleToThreePage (data) {
            this.$router.push({
                path: '/FreeAtlasDetails',
                query: {
                    data: JSON.stringify(data),
                    id: this.$route.query.id
                }
            })
        },
        //vr图集预览
        vrSee (item) {
            if (item.vrUrl) {
                let url = window.g.VrUrl + item.vrUrl
                if (ZWJSBridge) {
                    ZWJSBridge.openLink({
                        url: url
                    })
                        .then(res => {
                        })
                        .catch(err => {
                        })
                }
            } else {
                this.$toast.fail('暂未配置！')
                // this.$notify({ type: 'info', message: '暂未配置！' });
            }
        },
        //获取附件文件流
        getFileUrl: async function (element, item) {
            let formData = new FormData();
            formData.append("accessCode", "98bcf528966e48ce896a8b3fd02d45d5");
            formData.append(
                "cityCode",
                window.localStorage.getItem("citycode")
                    ? window.localStorage.getItem("citycode")
                    : "330282000000"
            );
            formData.append(
                "paramStr",
                JSON.stringify({
                    fileGuid: element.fileid,
                })
            );
            let response = await dataTransFilePreview(formData);
            if (response) {
                var img = new Blob([new Int8Array(response.data, 0)], {
                    type: response.headers["content-type"],
                }); //type类型可自定义
                element["isImage"] = true;
                element["url"] = window.URL.createObjectURL(img);
            }
        },
        getData: async function (data, data1) {
            debugger
            let params = {
                accessCode: '29ff26f660fc47f79c15bff382eeca6d',
                atlasName: data,
                bookNumber: '',
                atlasStyle: "通用图集",
                cityCode: window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : window.localStorage.getItem('citycode'),
                pageNo: this.index,
                pageSize: 10,
                atlasStyle: "通用图集"
            }
            if (this.$route.query.id) {
                if (window.localStorage.getItem('routerID') && window.localStorage.getItem('routerID') != undefined&&window.localStorage.getItem('routerID') != "undefined") {
                    params.cityCode = window.localStorage.getItem('routerID')
                } else {
                    if(this.$route.query.data.S){
                        params.cityCode=this.$route.query.data.S
                    }else if(this.$route.query.data&&JSON.parse(this.$route.query.data)){
                        params.cityCode=JSON.parse(this.$route.query.data).COUNTY;
                    }else{
                        params.cityCode=JSON.parse(this.$route.query.data).S;
                    }
                    //params.cityCode = this.$route.query.data.S
                    window.localStorage.setItem('routerID', this.$route.query.data.S)
                }
            }
            if (params.cityCode == 'undefined') {
                params.cityCode = JSON.parse(window.sessionStorage.getItem('fileData'))?.S
            }
            const res = await Atlases(params)
            if (res.data.code == 200) {
                let data2 = res.data.data.pageList
                // data2.forEach(item=>{
                //   this.getFileUrl(item)
                // })
                this.loading = false
                this.imagesList = this.imagesList.concat(data2) //追加数据
                if (res.data.data.pageList.length == 0) {
                    //数据全部加载完成
                    this.finished = true
                } else {
                    this.finished = false
                }
            } else {
                this.finished = true
                this.$toast.fail('暂无图集')
            }
            //   this.imagesList = res.data.data.pageList
        }
    },
    mounted () {
        this.imagesList = []
        this.showEdition = this.$store.state.Edition
    }
}
</script>
<style lang="scss">
#FreeAtlas {
    //   height: 100vh;
    //   height: 100%;
    background: #fff;
    font-size: 18px;

    .filterWrap {
        clear: both;
        // overflow: hidden;
    }

    .boxser {
        width: 45%;
        // height: 170px;
        border: 1px solid rgb(246, 246, 246);
        // box-shadow: 10px 10px 20px 10px #eee;
        float: left;
        margin: 1.5% 1.5% 1.5% 3%;
        border-radius: 10px;
    }

    .pcStyle {
        width: 24%;
        height: 330px;
        margin-left: 1%;
        float: left;

        img {
            width: 360px;
            height: 256px;
            text-align: center;
        }
    }
}
</style>
<style >
.van-cell {
    padding: 4px 14px !important;
}
</style>
  